<template>
  <view class="reg_container">
    <view class="logo">
      <image class="img-logo" :src="staticUrl()+'/new/xd_logo.png'" alt=""
        v-if="identity === '切换客户登录'" />
      <image class="img-logo" :src="staticUrl() + '/setting/wxLogo.png'" alt="" v-else />
    </view>

    <view v-if="usernameStatus">
      <view class="uesername">
        <text class="password">用户名：</text>
        <input type="text" placeholder="请输入用户名" class="input" v-model="username" />
      </view>
      <view class="uesername">
        <text class="password">密&emsp;码：</text>
        <input type="text" :password="eyesStatus ? false : true" placeholder="请输入密码" class="input"
          v-model="password" />
        <image :src="staticUrl() + '/home/hidden_hot_words.png'" class="closeEyes" mode=""
          v-if="!eyesStatus" @click="eyesStatus = !eyesStatus"></image>
        <image :src="staticUrl() + '/home/show_hot_words.png'" class="openEyes" mode=""
          v-if="eyesStatus" @click="eyesStatus = !eyesStatus">
        </image>
      </view>
    </view>

    <view v-if="verification">
      <view class="uesername">
        <text>手机号：</text>
        <input type="text" placeholder="请输入手机号" class="input" v-model="username" />
      </view>
      <view class="uesername">
        <text>验证码：</text>
        <input type="text" placeholder="请输入验证码" class="inputCode" v-model="code" />
        <text @click="clickCode" class="code">{{ codeContent }}</text>
      </view>
    </view>

    <view class="login" @click="login"> 登录 </view>

    <view class="wxCode">
      <!-- <text>其他方式</text> -->
      <!-- <button class="wx" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" plain=true>
        <image :src="staticUrl + '/setting/wx.png'"></image>
      </button> -->
      <!-- <text>微信登录</text> -->
      <!-- <image :src="staticUrl + '/setting/phone.png'" @click="phoneCodeLogin" v-if="usernameStatus">
      </image>
      <image :src="staticUrl + '/setting/user.png'" @click="usernameLogin" v-if="verification">
      </image> -->
      <!-- #ifndef MP -->
      <text class="switchLogin" @click="phoneCodeLogin" v-if="usernameStatus">手机登录</text>
      <text class="switchLogin" @click="usernameLogin" v-if="verification">账号密码登录</text>
      <view class="segmentation"></view>
      <!-- #endif -->
      <text class="switchLogin" @click="freeRegistration">免费注册</text>
      <view class="segmentation"></view>
      <view class="switchLogin" @click="changeIdentity"> {{ identity }} </view>
    </view>
  </view>
</template>

<script>
import { getSignIn, codeLogin } from '@/api/personalCenter/index.js'
import { salesmanGetSignIn, salesmanCodeLogin } from '@/api/invoicer/index.js'
import { autoLogin, bindWechat, getCode } from '@/api/login/wechat.js'

export default {
  data () {
    return {
      identity: '切换供应商登录',
      eyesStatus: false,
      username: '',
      password: '',
      code: '',
      wxCode: '',
      verification: false,
      usernameStatus: true,
      codeContent: '获取验证码',
      hasData: 60
    }
  },

  methods: {
    //切换登录身份
    changeIdentity () {
      this.identity = this.identity === '切换供应商登录' ? '切换客户登录' : '切换供应商登录'
    },
    freeRegistration () {
      uni.navigateTo({
        url: '/pages_user/reg/reg'
      })
    },
    getUserName (e) {
      this.$nextTick(() => {
        this.username = e.detail.value.replace(/[^\d]/g, '')
      })
    },
    // 获取验证码
    clickCode () {
      getCode('LOGIN', this.username).then(res => {
        if (res.code === 200) {
          this.hasTimer()
        }
      })
    },
    // 定时器
    hasTimer () {
      this.codeContent = this.hasData + 's'
      setTimeout(() => {
        if (this.hasData > 1) {
          this.hasData--
          this.hasTimer()
        } else {
          this.codeContent = '获取验证码'
        }
      }, 1000)
    },
    // 账号密码登录
    usernameLogin () {
      this.verification = false
      this.usernameStatus = true
    },
    // 验证码登录
    phoneCodeLogin () {
      this.verification = true
      this.usernameStatus = false
    },
    goHome () {
      uni.switchTab({
        url: '/pages/index/index',
        success: res => {
          uni.$emit('update', '更新首页')
          // let page = getCurrentPages().pop();
          // if (page == undefined || page == null) return;
          // page.onLoad()
        }
      })
    },
    // // 获取手机号
    // getPhoneNumber(e) {
    // 	getWechatCode().then(code => {
    // 		this.wxCode = code
    // 		let data = {
    // 			code: this.wxCode,
    // 			encryptedData: e.detail.encryptedData,
    // 			iv: e.detail.iv
    // 		}
    // 		if (e.detail.code) {
    // 			// 参数e是绑定的授权方法自动传入过来的, 为了获取到iv和encryptedData值，让后端解析手机号
    // 			autoLogin(data).then(res => {
    // 				if (res.code === 200) {
    // 					uni.setStorageSync('token', res.data.accessToken)
    // 					uni.showToast({
    // 						icon: 'none',
    // 						title: '登录成功',
    // 						mask: true
    // 					})
    // 					this.goHome()
    // 				}
    // 			})
    // 		}
    // 	})
    // },
    login () {
      if (this.usernameStatus) {
        if (!this.username && !this.password) {
          uni.showToast({ icon: 'none', title: '请输入账号或密码', mask: true })
          return
        }

        uni.setStorageSync('username', this.username)
        uni.setStorageSync('password', this.password)

        if (this.identity == '切换供应商登录') {
          //当前是客户登录
          getSignIn({ username: this.username, password: this.password }).then(res => {
            if (res.code === 200) {
              uni.setStorageSync('token', res.data.accessToken)
              uni.setStorageSync('standing', "业务员")
              uni.showToast({ icon: 'none', title: '登录成功', mask: true })
              // #ifdef MP-WEIXIN
              bindWechat()
              // #endif
              this.goHome()
            }
          })
        } else {
          //当前是业务员登录
          salesmanGetSignIn({ username: this.username, password: this.password }).then(res => {
            if (res.code === 200) {
              uni.setStorageSync('token', res.data.accessToken)
              uni.setStorageSync('standing', "供应商")
              uni.showToast({ icon: 'none', title: '登录成功', mask: true })
              // // #ifdef MP-WEIXIN
              // bindWechat();
              // // #endif
              uni.reLaunch({ url: '/invoicer/index' })
            }
          })
        }
      }

      if (this.verification) {
        if (!this.username && !this.code) {
          uni.showToast({ icon: 'none', title: '请输入手机号或验证码', mask: true })
          return
        }

        if (this.identity == '切换供应商登录') {
          codeLogin({ mobile: this.username, code: this.code }).then(res => {
            if (res.code === 200) {
              uni.setStorageSync('token', res.data.accessToken)
              uni.setStorageSync('standing', "业务员")
              uni.showToast({ icon: 'none', title: '登录成功', mask: true })
              this.goHome()
            }
          })
        } else {
          salesmanCodeLogin({ mobile: this.username, code: this.code }).then(res => {
            if (res.code === 200) {
              uni.setStorageSync('token', res.data.accessToken)
              uni.setStorageSync('standing', "供应商")
              uni.showToast({ icon: 'none', title: '登录成功', mask: true })
              uni.reLaunch({
                url: '/invoicer/index'
              })
            }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.reg_container {
  width: 100%;
  height: 100vh;

  .identity {
    margin: 24rpx 58rpx 0 0;
    text-align: right;
    font-size: 29rpx;
    color: #2871fc;
  }

  .logo {
    img,
    .img-logo {
      width: 165.28rpx;
      height: 165.28rpx;
      margin: 10% 292.36rpx 10%;
      border-radius: 20rpx;
    }
  }

  .uesername {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    border-bottom: 1px solid #f9f9f9;
    margin: 30rpx 81.67rpx 0;
    font-size: 32rpx;

    .password {
      width: 25%;
      text-align: center;
    }

    .input {
      width: 45%;
      margin-left: 33.06rpx;
    }

    .inputCode {
      width: 45%;
      margin-left: 33.06rpx;
    }

    .code {
      color: #2871fc;
    }

    .closeEyes {
      width: 30.56rpx;
      height: 12.5rpx;
      padding: 20rpx;
    }

    .openEyes {
      width: 30.56rpx;
      height: 21.53rpx;
      padding: 20rpx;
    }
  }

  .login {
    width: 667rpx;
    height: 80rpx;
    font-size: 29rpx;
    line-height: 78rpx;
    text-align: center;
    color: #fff;
    background: #2871fc;
    box-shadow: -3rpx 12rpx 15rpx 0rpx rgba(65, 165, 250, 0.17);
    border-radius: 80rpx;
    margin: 0 auto;
    margin-top: 100rpx;
  }

  .changePassword {
    color: #2871fc;
    font-size: 29rpx;
    width: 100%;
    text-align: center;
    margin-top: 50rpx;
  }

  .wxCode {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

    .switchLogin {
      color: #2871fc;
      font-size: 29rpx;
    }

    .segmentation {
      width: 1rpx;
      height: 38rpx;
      background: #000;
      opacity: 0.2;
      margin: 0 42rpx;
    }
  }

  image {
    width: 80rpx;
    height: 80rpx;
  }

  .wx {
    background-color: #fff;
    height: 80rpx;
    padding: 0;
    // transform: translateX(-50%);
    // display: flex;
    // flex-flow: column nowrap;
    // align-items: center;
    border: 0;

    text {
      font-size: 29rpx;
      color: #8b8b8b;
    }
  }
}
</style>
